<div class="editor-row">
  <div class="section gf-form-group">
    <h5 class="section-heading">Options</h5>
    <gf-form-switch
      class="gf-form"
      label="Show"
      label-class="width-7"
      checked="ctrl.panel.legend.show"
      on-change="ctrl.render()"
      aria-label="gpl show legend"
    >
    </gf-form-switch>
    <gf-form-switch
      class="gf-form"
      label="As Table"
      label-class="width-7"
      checked="ctrl.panel.legend.alignAsTable"
      on-change="ctrl.render()"
    >
    </gf-form-switch>
    <gf-form-switch
      class="gf-form"
      label="To the right"
      label-class="width-7"
      checked="ctrl.panel.legend.rightSide"
      on-change="ctrl.render()"
    >
    </gf-form-switch>
    <div ng-if="ctrl.panel.legend.rightSide" class="gf-form">
      <label class="gf-form-label width-7">Width</label>
      <input
        type="number"
        class="gf-form-input max-width-5"
        placeholder="250"
        bs-tooltip="'Set a min-width for the legend side table/block'"
        data-placement="right"
        ng-model="ctrl.panel.legend.sideWidth"
        ng-change="ctrl.render()"
        ng-model-onblur
      />
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Values</h5>

    <div class="gf-form-inline">
      <gf-form-switch
        class="gf-form"
        label="Min"
        label-class="width-7"
        checked="ctrl.panel.legend.min"
        on-change="ctrl.legendValuesOptionChanged()"
      >
      </gf-form-switch>

      <gf-form-switch
        class="gf-form max-width-12"
        label="Max"
        label-class="width-7"
        switch-class="max-width-5"
        checked="ctrl.panel.legend.max"
        on-change="ctrl.legendValuesOptionChanged()"
      >
      </gf-form-switch>
    </div>

    <div class="gf-form-inline">
      <gf-form-switch
        class="gf-form"
        label="Avg"
        label-class="width-7"
        checked="ctrl.panel.legend.avg"
        on-change="ctrl.legendValuesOptionChanged()"
      >
      </gf-form-switch>

      <gf-form-switch
        class="gf-form max-width-12"
        label="Current"
        label-class="width-7"
        switch-class="max-width-5"
        checked="ctrl.panel.legend.current"
        on-change="ctrl.legendValuesOptionChanged()"
      >
      </gf-form-switch>
    </div>

    <div class="gf-form-inline">
      <gf-form-switch
        class="gf-form"
        label="Total"
        label-class="width-7"
        checked="ctrl.panel.legend.total"
        on-change="ctrl.legendValuesOptionChanged()"
      >
      </gf-form-switch>

      <div class="gf-form">
        <label class="gf-form-label width-7">Decimals</label>
        <input
          type="number"
          class="gf-form-input width-5"
          placeholder="auto"
          bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
          data-placement="right"
          ng-model="ctrl.panel.decimals"
          ng-change="ctrl.render()"
          ng-model-onblur
        />
      </div>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Hide series</h5>
    <gf-form-switch
      class="gf-form"
      label="With only nulls"
      label-class="width-7"
      checked="ctrl.panel.legend.hideEmpty"
      on-change="ctrl.render()"
    >
    </gf-form-switch>
    <gf-form-switch
      class="gf-form"
      label="With only zeros"
      label-class="width-7"
      checked="ctrl.panel.legend.hideZero"
      on-change="ctrl.render()"
    >
    </gf-form-switch>
  </div>
</div>
